<template>  
    <div class="container">   
      <div class="main">  
        <div class="header">  
          <el-button type="primary" @click="add">新建</el-button>  
          <el-button type="success" @click="importData">导入</el-button>  
          <el-button type="warning" @click="edit">编辑</el-button>  
        </div>  
        <el-table :data="tableData" border class="eltable">  
          <el-table-column prop="llck_zt" label="状态" width="80">
            <template #default="{ row }">
              <span v-if="row.llck_zt === 1">未出库</span>
              <span v-else-if="row.llck_zt === 2">已出库</span>
            </template>
          </el-table-column>  
          <el-table-column prop="wl_code" label="物料编码"></el-table-column>  
          <el-table-column prop="llckxx_wlmc" label="物料名称"></el-table-column>  
          <el-table-column prop="dictionary_name" label="物料分类"></el-table-column>  
          <el-table-column prop="dw_name" label="物料单位" ></el-table-column>  
          <el-table-column prop="llckxx_cksl" label="出库数量" ></el-table-column>  
          <el-table-column prop="ck_name" label="出库仓库"></el-table-column>  
        </el-table>  
        <div class="button-container">
                <el-button type="danger" @click="onCancel">返回</el-button>
            </div>
      </div>  
    </div>  
    
  </template>  
  
  <script>  
  import axios from 'axios';
  import { ref,onMounted ,nextTick} from 'vue';  
  import { useRoute,useRouter } from 'vue-router';
  import { ElMessage, ElMessageBox } from 'element-plus';
  
  export default {  
    setup() {  
        const router = useRouter();
        const route = useRoute();
      const searchKey = ref(''); 
      const row = ref(null); 
      const treeData = ref([]);  
      const defaultProps = {  
        children: 'children',  
        label: 'label',  
      };  
  
      const tableData = ref([]);  
  
      const selectedFilter = ref('');  
      const searchTable = ref('');  
      const currentPage = ref(1);  
      const pageSize = ref(2);  
      const totalItems = ref(3);  

// const sx = (row) => {  
//         // 添加逻辑  
//         axios.get('/api/WMS_LLCKXX/Getckxx?code='+row)
//             .then(function (response) {
//                 console.log(response.data);
//                 tableData.value = response.data
//             })
//             .catch(function (error) {
//                 console.error('错误:', error);
//             })
//         };

      const add = () => { 
        
        // 添加逻辑  
      };  
  
      const edit = () => {  
        // 编辑逻辑  
      };  
  
      const importData = () => {  
        // 导入逻辑  
      };  
  
      const query = () => {  
        // 查询逻辑  
        console.log('Querying with:', searchTable.value);  
      };  
  
      const onCancel = () => {
            router.push({ path: '/RawMaterialsStorage' });
        } 
   
  
      const handleCurrentChange = (page) => {  
        currentPage.value = page;  
        // 分页逻辑  
        console.log('Current page:', page);  
      };  
      onMounted(async () => {
      // 获取传递过来的 yclcg_code
      const llck_code = route.query.llck_code;

      const cgxqResponse = await axios.get(`/api/WMS_LLCKXX/Getckxx?code=${llck_code}`);
      const cgxq1 = cgxqResponse.data;

      // 确保 cgxq1 是一个数组
      if (Array.isArray(cgxq1)) {
        tableData.value = cgxq1;
      } else if (typeof cgxq1 === 'object' && cgxq1 !== null) {
        // 如果 cgxq1 是一个对象，将其转换为数组
        tableData.value = [cgxq1];
      } else {
        // 如果 cgxq1 是其他类型，初始化为空数组
        tableData.value = [];
      }

      // 确保数据在表格渲染之前赋值
      nextTick(() => {
        console.log('Table data updated:', tableData.value);
      });
    });
  
      // 确保所有函数都被返回  
      return {  
        searchKey,  
        treeData,  
        defaultProps,  
        tableData,  
        selectedFilter,  
        searchTable,  
        currentPage,  
        pageSize,  
        totalItems,  
        add,  
        edit,  
        importData,  
        query,  
        onCancel,
        handleCurrentChange,  
      };  
    },  
  };  
  </script>  
  
  <style>  
.container {  
  display: flex;  
  gap: 20px;
  height: 95%;
}  

.sidebar {  
  height: 100%;
  
}  

.main {  
  width: 80%;
  flex: 1;  
  height: 100%;
}  

.header {  
   display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}  
.eltable{
  height: 95%;
}
.letree{
  height: 100%;
}
.button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
</style>